<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_数据平台2.5D动画</title>
  <link rel="stylesheet" href="style.css" />
  <style>
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
    }

    html,
    body {
      width: 100%;
      position: relative;
    }

    #banner {
      position: absolute;
      min-width: 100%;
      min-height: 500px;
      height: auto;
      width: auto;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: -10;
      background-image: url(./images/banbj.jpeg);
      background-repeat: no-repeat;
      background-position: center;
    }

    .maxCon {
      height: 500px;
      width: 100%;
      max-width: 1200px;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
    }
  </style>
  <!-- 2.图片布局样式 -->
  <style>
    .rtMove {
      width: 444px;
      height: 430px;
      position: absolute;
      right: 70px;
      top: 40px;
      background-image: url(./images/banner.png);
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    /* 动画的子元素 */
    .rtMove .tuC {
      position: absolute;
      top: 228px;
      left: 168px;
      opacity: 1;
      animation: tuC 1.6s linear infinite;
    }

    .rtMove .tuB {
      position: absolute;
      top: 123px;
      left: 111px;
      animation: tuB 2s linear infinite;
    }

    .rtMove .guangA {
      position: absolute;
      top: 309px;
      left: 279px;
      animation: guangA 1.3s linear infinite;
    }

    .rtMove .guangB {
      position: absolute;
      top: 263px;
      left: 239px;
      animation: guangB 1.1s linear infinite;
    }

    .rtMove .lingxA {
      position: absolute;
      top: 194px;
      left: 126px;
      opacity: 1;
      animation: lingxA 2s linear infinite;
    }

    .rtMove .lingxB {
      position: absolute;
      top: 163px;
      left: 79px;
      opacity: 1;
      animation: lingxB 2.2s linear infinite;
    }

    .rtMove .lingxC {
      position: absolute;
      top: 179px;
      left: 189px;
      opacity: 1;
      animation: lingxC 1.7s linear infinite;
    }

    .rtMove .lingxD {
      position: absolute;
      top: 103px;
      left: 160px;
      opacity: 1;
      animation: lingxC 2.7s linear infinite;
    }

    .rtMove .lingxE {
      position: absolute;
      top: 104px;
      left: 95px;
      opacity: 1;
      animation: lingxB 1.2s linear infinite;
    }

    .rtMove .lingxF {
      position: absolute;
      top: 84px;
      left: 144px;
      opacity: 1;
      animation: lingxA 1.4s linear infinite;
    }

    .rtMove .chaunB {
      position: absolute;
      top: 38px;
      left: 318px;
      animation: chaunB 1.2s linear infinite;
    }

    .rtMove .chaunC {
      position: absolute;
      top: 60px;
      left: 318px;
      animation: chaunC 0.7s linear infinite;
    }

    .rtMove .tuA {
      position: absolute;
      top: 140px;
      left: 316px;
      animation: tuA 1.3s linear infinite;
    }

    .rtMove .tuAa {
      position: absolute;
      top: 140px;
      left: 316px;
      animation: tuAa 1.3s linear infinite;
    }

    .rtMove .ziA {
      position: absolute;
      top: 114px;
      left: 320px;
      animation: ziA 2.6s linear infinite;
    }

    .rtMove .ziB {
      position: absolute;
      top: 144px;
      left: 339px;
      animation: ziB 2s linear infinite;
    }

    .rtMove .ziC {
      position: absolute;
      top: 91px;
      left: 349px;
      animation: ziC 1.7s linear infinite;
    }

    .rtMove .ma {
      position: absolute;
      top: 247px;
      left: 303px;
    }

    .rtMove .tuMing {
      opacity: 0;
      animation: tuMing 0.6s linear infinite;
    }

    .rtMove .ren {
      position: absolute;
      top: 283px;
      left: 330px;
    }
  </style>

</head>

<body>

  <div id="banner">
    <div class="an">
      <div class="maxCon">
        <div class="rtMove">
          <img class="tuC" src="./images/tuC.png" />
          <img class="tuB" src="./images/tuB.png" />
          <img class="guangA" src="./images/guang.png" />
          <img class="guangB" src="./images/guang.png" />

          <img class="lingxA" src="./images/lingxA.png" />
          <img class="lingxB" src="./images/lingxB.png" />
          <img class="lingxC" src="./images/lingxC.png" />
          <img class="lingxD" src="./images/lingxD.png" />
          <img class="lingxE" src="./images/lingxE.png" />
          <img class="lingxF" src="./images/lingxF.png" />

          <img class="chaunB" src="./images/chaunB.png" />
          <img class="chaunC" src="./images/chaunB.png" />
          <img class="tuA" src="./images/tuA.png" />
          <img class="tuAa" src="./images/tuA.png" />

          <img class="ziA" src="./images/ziA.png" />
          <img class="ziB" src="./images/ziB.png" />
          <img class="ziC" src="./images/ziC.png" />

          <img class="ma tuAn" src="./images/tuAn.png" />
          <img class="ma tuMing" src="./images/tuMing.png" />

          <img class="ren" src="./images/ren.png" />
        </div>
      </div>
    </div>
  </div>

</body>

</html>